<template>
  <div class="l-checkbox">
    <view class="job _df _ac _frw">
      <template v-for="(item, idx) in checkList">
        <view
          class="item _df _ac _jc mb15 mr10"
          :class="{ active: chooseJob.indexOf(item.id) != -1 }"
          :key="idx"
          @click="checkItem(item)"
        >
          {{ item.tagName }}
        </view>
      </template>
    </view>
  </div>
</template>

<script>
export default {
  name: "l-checkbox",
  props: {
    // 待选择的数组
    list: {
      type: Array,
      default: [],
    },
    // 最大选择数，默认为1-单选
    maxLength: {
      type: Number,
      default: 1,
    },
    // 选中项
    checkCode:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      checkList: [],
      chooseJob: [],
      max: 1,
    };
  },
  computed: {},
  methods: {
    // 期望工种-单选、多选
    checkItem(e) {
      if (this.chooseJob.indexOf(e.id) == -1) {
        if (this.max > 1) {
          // 多选
          if (this.chooseJob.length < this.max) {
            this.chooseJob.push(e.id);
          } else {
            this.$u.toast("最多选择"+this.max+"项");
          }
        } else {
          this.chooseJob = [];
          this.chooseJob.push(e.id);
        }
      } else {
        // 取消选中
        this.chooseJob.splice(this.chooseJob.indexOf(e.id), 1);
      }
      if (this.max > 1) {
        // 多选
        this.$emit("checkBox", this.chooseJob);
      } else {
        // 单选
        this.$emit("checkRadio", this.chooseJob);
      }
    },
  },
  watch: {
    maxLength(v) {
      this.max = v;
    },
    list:{
      handler(newval){
        this.checkList = newval
      },
      deep:true
    },
    checkCode:{
      handler(newval){
        this.chooseJob = newval
      },
      deep:true
    }
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.checkList = this.list;
    this.max = this.maxLength;
  },
};
</script>

<style lang="scss" scoped>
.l-checkbox {
  .job {
    .item {
      padding: 10rpx 20rpx;
      //height: 72rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      font-size: $uni-font-size-30;
      //&:nth-child(5n) {
        //margin-right: 0;  
      //}
			border: 1rpx solid #f8f8f8;
    }
    .active {
      background-color: #ECF1FA;
      color: $uni-font-color;
      border: 1rpx solid $uni-font-color;
    }
  }
}
</style>